<template>
    <div class="safeCenter">
        <van-nav-bar
            title="安全中心"
            left-text="返回"
            left-arrow
            fixed
            @click-left="back"
        />

        <BgBox>
            <van-cell title="修改密码" is-link @click="change" />
            <van-cell title="注销账号" is-link />

            <van-popup is-link position="bottom" closeable v-model="isShow">
                <div class="update-password">修改密码</div>
                    <van-field
                        :type="isPassword ? 'password' : 'text'"
                        name="旧密码"
                        label="旧密码"
                        placeholder="字母数字_组合且字母开头(6-16位)"
                        :right-icon="isPassword ? 'closed-eye' : 'eye-o'" 
                        autocomplete="off"
                    />

                    <van-field
                        :type="isPassword ? 'password' : 'text'"
                        name="新密码"
                        label="新密码"
                        placeholder="字母数字_组合且字母开头(6-16位)"
                        :right-icon="isPassword ? 'closed-eye' : 'eye-o'" 
                        autocomplete="off"
                    />
            </van-popup>
        </BgBox>
    </div>
</template>

<script>
import BgBox from "../components/BgBox.vue";
    export default {
        name: 'SafeCenter',

        components:{
            BgBox
        },

        data(){
            return{
                listData:[
                    {title: '修改密码'},
                    {title: '注销账号'}
                ],

                isShow: false,

                isPassword: false,
            }
        },

        methods:{
            //返回上一级
            back() {
                this.$router.go(-1);
            },

            change(){
                this.isShow = true;
            }
        }
    }
</script>

<style lang="less" scoped>
.safeCenter{
    padding-bottom: 50px;
    padding-top: 46px;

    /deep/ .van-nav-bar .van-icon{
        color: #6d4c41;
    }

    /deep/ .van-nav-bar__text{
        color: #6d4c41;
    }
}
</style>